<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜗牛图书商城</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>

	<!-- 商品展示 -->
	<div class="col-md-10 col-md-push-1">
		<div class="col-md-12 bg-danger text-left" style="margin-bottom: 10px">
			<div class="col-md-6 text-left">
				<h3>${loginUser.uname}的订单</h3>
			</div>
			<div class="col-md-6 text-right">
				<button class="btn btn-lg btn-primary" onclick="goBack()"
					style="height: 56px">返回</button>
			</div>
		</div>
		<div style="height: 630px;">
			<div class="col-md-12 bg-warning text-center" id="cartView">
				<div class="col-md-12 text-center panel" id="view"
					style="margin-top: 10px">
					<!-- 展示操作路径 -->
					<div class="panel-heading text-left">
						<a href="index.jsp">商城首页</a>-><a href="javascript:void(0)">订单管理</a>
					</div>
					<!-- 面板主体 -->
					<div class="panel-body">
						<!-- 表格 -->
						<table class="table table-bordered table-hover table-striped">
							<!-- 表头 -->
							<thead>
								<tr>
									<th class="text-center" style="vertical-align: middle">序号</th>
									<th class="text-center" style="vertical-align: middle">订单号</th>
									<th class="text-center" style="vertical-align: middle">下单时间</th>
									<th class="text-center" style="vertical-align: middle"><select
										name="ostate" id="ostate" class="form-control"
										onchange="goPage(1)">
											<option value="0">所有订单</option>
											<option value="2">已提交未付款</option>
											<option value="3">已付款未发货</option>
											<option value="4">已发货未收货</option>
											<option value="5">订单完成</option>
									</select></th>
									<th class="text-center" style="vertical-align: middle">操作</th>
								</tr>
							</thead>
							<!-- 表格主体 -->
							<tbody id="orderFormTB">

							</tbody>
							<tfoot id="pageNav">

							</tfoot>
						</table>
					</div>
					<!-- 新增按钮 -->
					<div class="panel-footer" style="height: 50px"></div>
				</div>
			</div>
			<div class='col-md-12 bg-warning' style="height: 50px;"></div>
		</div>
	</div>
	<!-- 版权页 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script src="js/dateFormat.js"></script>
<script type="text/html" id="orderFormTable">
{{each orderFormes orderForm}}
	<tr>
		<td style="vertical-align:middle">{{$index+1}}</td>
		<td style="vertical-align:middle">{{orderForm.ono}}</td>
		<td style="vertical-align:middle">{{orderForm.odate | dateFormat:'yyyy-MM-dd'}}</td>
		<td style="vertical-align:middle">
			{{if orderForm.ostate==2}}
				已提交未付款
			{{else if orderForm.ostate==3}}
				已付款未发货
			{{else if orderForm.ostate==4}}
				已发货未收货
			{{else if orderForm.ostate==5}}
				订单完成
			{{else if orderForm.ostate==6}}
				订单异常
			{{/if}}
		</td>
		<td style="vertical-align:middle">
			{{if orderForm.ostate==2}}
				<button class="btn btn-sm btn-warning" onclick="cancelOrder({{orderForm.oid}})">取消订单</button>
				<button class="btn btn-sm btn-info" onclick="toPay({{orderForm.oid}})">继续支付</button>
			{{else if orderForm.ostate==4}}
				<button class="btn btn-sm btn-success" onclick="receipt({{orderForm.oid}})">确认收货</button>
			{{/if}}
			<button class="btn btn-sm btn-primary" onclick="showInfo({{orderForm.oid}})">查看详情</button>
		</td>
	</tr>	
{{/each}}
</script>
<script type="text/html" id="pageBtn">
	<tr>
		<td style="vertical-align:middle" colspan="7">
		<!-- 分页操作按键 -->
			<button class="btn btn-xs btn-primary" onclick="goPage(1)">首页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{page==1?1:page-1}})">上一页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{page==totalPage?totalPage:page+1}})">下一页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{totalPage}})">末页</button>
			<br> <span>共{{totalPage}}页，现在是第{{page}}页。</span>
		</td>
	</tr>	
</script>
<script type="text/javascript">
	$(document).ready(function() {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.href = "index.jsp";
			return;
		} else {
			//读取订单信息
			goPage(1);
		}
	})

	//返回
	function goBack() {
		history.go(-1);
	}

	//取消订单
	function cancelOrder(oid) {
		if (confirm("订单一旦取消不可恢复，您确定要取消该订单吗？")) {
			$.ajax({
				url : "orderForm",
				type : "post",
				data : {
					"opr" : "cancelOrder",
					"oid" : oid
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						alert("该订单已被取消。");
						location.reload();
					} else if (result.msg == "null") {
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//翻页
	function goPage(page) {
		$.ajax({
			url : "orderForm",
			type : "post",
			data : {
				"opr" : "findValidByPage",
				"page" : page,
				"ostate" : $("#ostate").val()
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					//生成表格
					let orderFormHtml = template("orderFormTable", {
						orderFormes : result.list
					});
					$("#orderFormTB").html(orderFormHtml);

					// 通过模板生成分页按键表					
					let pageBtnHtml = template("pageBtn", {
						page : result.pageBean.page,
						totalPage : result.pageBean.totalPage
					});
					$("#pageNav").html(pageBtnHtml);
				} else if (result.msg == "null") {
					alert("请登录商城用户账号！");
					location.href = "index.jsp";
				} else {
					alert(result.msg);
					location.href = "index.jsp";
				}
			}
		})
	}

	//将购物车中所选的商品作为订单提交
	function toPay(oid) {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.reload();
			return;
		}
		$.ajax({
			url : "orderForm",
			type : "post",
			data : {
				"opr" : "toPay",
				"oid" : oid
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					location.href = "creatOrderForm.jsp";
				} else if (result.msg == "null") {
					alert("请登录商城用户账号！");
					location.reload();
				} else {
					alert(result.msg);
				}
			}
		})
	}

	//确认收货
	function receipt(oid) {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.reload();
			return;
		}
		if (!confirm("您已经收到商品了吗？")) {
			return;
		}
		$.ajax({
			url : "orderForm",
			type : "post",
			data : {
				"opr" : "receipt",
				"oid" : oid
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					alert("确认收货成功！");
					location.reload();
				} else if (result.msg == "null") {
					alert("请登录商城用户账号！");
					location.reload();
				} else {
					alert(result.msg);
				}
			}
		})
	}

	//展示商品详情
	function showInfo(oid) {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.reload();
			return;
		}
		$.ajax({
			url : "orderInfo",
			type : "post",
			data : {
				"opr" : "showInfo",
				"oid" : oid
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					location.href = "orderInfoView.jsp";
				} else if (result.msg == "null") {
					alert("请登录商城用户账号！");
					location.reload();
				} else {
					alert(result.msg);
				}
			}
		})
	}
</script>
</html>